<template>
	<view class="container">
		<scroll-view class="scr-question" scroll-y="true">
			<view class="section-item" v-for="item in categoryList" :key="item.uuid">
				<view>{{ item.name }}</view>
				<question v-for="citem in item.questionList" :key="citem.uuid" :itemData="citem" @change="handleAnswerChange(citem, $event)"></question>
			</view>
		</scroll-view>
		<view class="op-wrapper">
			<!-- <button class="op-item" @click="handlePreClick">上一题</button> -->
			<button class="op-item" @click="handleCollectClick">{{ isCollect ? '取消收藏' : '收藏' }}</button>
			<button class="op-item" @click="handleSaveClick">交卷</button>
			<!-- <button class="op-item" @click="handleNextClick">下一题</button> -->
		</view>
		<login v-if="isShowLogin" @close="isShowLogin = false" @success="handleSuccess"/>
	</view>
</template>

<script>
import Question from "@/components/question.vue";
import Login from "@/components/login.vue";
import { detail, saveAnswer } from "@/api/paper.js";
import { getItem as getCollect, add as addCollect, cancel as cancelCollect } from "@/api/collect.js";
import { add as addRecord } from "@/api/record.js";

export default {
	components: { 
		Question,
		Login,
	},
	data() {
		return {
			item: {
				id: 0,
				uuid: '',
				name: '',
			},
			categoryList: [],
			isCollect: false,
			isShowLogin: false,
		}
	},
	onLoad(opts) {
		const { uuid, name } = opts;
		this.item.uuid = uuid;
		this.item.name = name;
		uni.setNavigationBarTitle({
			title: name
		});
		this.getDetail();
		this.getCollect();
	},
	methods: {
		getDetail() {
			uni.showLoading();
			return detail({
				uuid: this.item.uuid,
			}).then(({ question = [], uuid: relate_uuid, type }) => {
				console.warn(question);
				this.categoryList.splice(0, this.categoryList.length);
				this.categoryList.push(...question.filter(({ questionList }) => questionList.length > 0));
				this.categoryList.forEach((cate) => {
					cate.questionList.forEach((item, index) => {
						item.basic.no = index + 1;
						item.children.forEach((citem, cindex) => {
							citem.basic.no = cindex + 1;
						});
					});
				});
				addRecord({
					relate_uuid,
					type,
				});
			}).catch(({ code, msg }) => {
				if (code === 10001) {
					this.isShowLogin = true;
				} else {
					uni.showToast({
						title: msg
					});
				}
			}).finally(() => {
				uni.hideLoading();
			});
		},
		getCollect() {
			uni.showNavigationBarLoading();
			return getCollect({
				uuid: this.item.uuid,
				type: 'ZJLX',
			}).then(({ id }) => {
				this.isCollect = id;
			}).catch(console.warn).finally(() => {
				uni.hideNavigationBarLoading();
			});
		},
		handlePreClick() {
		},
		handleCollectClick() {
			if (this.isCollect) {
				this.cancelCollect();
			} else {
				this.addCollect();
			}
		},
		addCollect() {
			uni.showNavigationBarLoading();
			return addCollect({
				uuid: this.item.uuid,
				type: 'ZJLX',
			}).then(({ id }) => {
				this.isCollect = id;
				uni.showToast({
					title: '已收藏'
				});
			}).catch(console.warn).finally(() => {
				uni.hideNavigationBarLoading();
			});
		},
		cancelCollect() {
			uni.showNavigationBarLoading();
			return cancelCollect({
				id: this.isCollect
			}).then(() => {
				this.isCollect = false;
				uni.showToast({
					title: '已取消收藏'
				});
			}).catch(console.warn).finally(() => {
				uni.hideNavigationBarLoading();
			});
		},
		handleSaveClick() {
			uni.showLoading({
				title: '保存中...'
			});
			
			console.warn(this.categoryList);
			const ar = this.categoryList.flatMap(({ questionList }) => questionList).filter(({ current_answer }) => current_answer);
			console.warn(ar);
			saveAnswer({
				uuid: this.item.uuid,
				answer: ar.map((item) => {
					return {
						question_uuid: item.basic.uuid,
						answer: item.current_answer,
						type_code: item.basic.type_code,
					};
				}),
			}).then(() => {
				uni.showToast({
					title: "保存成功"
				});
				setTimeout(() => {
					uni.switchTab({
						url: '/pages/learn/index'
					});
				}, 1520);
			}).finally(() => {
				uni.hideLoading();
			});
		},
		handleNextClick() {
		},
		handleAnswerChange(item, evt) {
			console.warn('handleAnswerChange', item, evt);
			if (item.basic.type_code === 'fill') {
				const arr = item.current_answer ? item.current_answer.split(";") : [evt];
				const arv = evt.split(",");
				let ext = false;
				const art = arr.map((itm) => {
					const ar = itm.split(",");
					if (ar[0] === arv[0]) {
						ext = true;
						return evt;
					}
					return itm;
				});
				if (ext === false) {
					art.push(evt);
				}
				item.current_answer = art.join(";");
			} else {
				item.current_answer = Array.isArray(evt) ? evt.join() : evt;
			}
		},
		handleSuccess() {
			this.isShowLogin = false;
			this.getDetail();
			this.getCollect();
		},
	}
}
</script>

<style lang="scss" scoped>
.container {
	background-color: white;
	padding: 20rpx;
	.scr-question {
		height: calc(100vh - 100rpx);
	}
	
	.section-item:nth-of-type(n+2) {
		margin-top: 10rpx;
	}
	.section-title:nth-of-type(n+2) {
		border-top: 1px solid $km-border-color;
	}
	.section-title {
		padding-top: 10rpx;
		padding-bottom: 10rpx;
		color: gray;
	}
	.section-item {
		margin-bottom: 10rpx;
	}
	
	.section-item:nth-last-child(n+1) {
		margin-bottom: 10rpx;
	}
}
	.op-wrapper {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		border-top: 1rpx solid lightgray;
		justify-content: space-evenly;
		.op-item {
			outline: none;
			border: none;
			border-radius: 0;
		}
		.op-item::after {
			content: none;
		}
	}
</style>
